<template>
	<div class="app-container bgco">
		<div class="filter-container">
			<el-form :model="wechat" :rules="rules" ref="wechat" size="mini" >
				<el-tabs v-model="activeName" @tab-click="handleClick" style="margin-bottom:10px;">
					<el-tab-pane label="公众号配置" name="first">
						<el-row :gutter="10">
							<el-col :xs="24" :sm="16" :md="16" :lg="14" :xl="12">
								<el-form-item label="AppId：" label-width="140px" prop="gzhAppId">
									<el-input v-model="wechat.gzhAppId"></el-input>
								</el-form-item>
								<el-form-item label="AppSecret：" label-width="140px" prop="gzhAppSecret">
									<el-input v-model="wechat.gzhAppSecret"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-tab-pane>
					<el-tab-pane label="小程序配置" name="second">
						<el-row :gutter="10">
							<el-col :xs="24" :sm="16" :md="16" :lg="14" :xl="12">
								<el-form-item label="AppId：" label-width="140px" prop="xcxAppId">
									<el-input v-model="wechat.xcxAppId"></el-input>
								</el-form-item>
								<el-form-item label="AppSecret：" label-width="140px" prop="xcxAppSecret">
									<el-input v-model="wechat.xcxAppSecret"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-tab-pane>
					<el-tab-pane label="公共配置" name="third">
						<el-row :gutter="10">
							<el-col :xs="24" :sm="16" :md="16" :lg="14" :xl="12">
								<el-form-item label="回调地址：" label-width="140px" prop="domain">
									<el-input v-model="wechat.domain"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-tab-pane>
				</el-tabs>
				<el-form-item label-width="140px" class="containbtn">
					<el-button class="subbtn" type="primary" icon="el-icon-success" size="medium" @click="sub('wechat')">提交</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	import waves from '@/directive/waves' // Waves directive
	import {
		seewec,
		savewec
	} from '@/api/admin/configure' //调用模块接口
	export default {
		name: 'wechat',
		components: {},
		directives: {
			waves
		},
		data() {
      var _gzhAppId = (rule, value, callback) => {
        if (this.activeName ==  'first') {
          if (this.wechat.gzhAppId == '') {
              return callback(new Error("请填写gzhAppId"));
          }
        }
        return callback();
      };
      var _gzhAppSecret = (rule, value, callback) => {
        if (this.activeName == 'first') {
          if (this.wechat.gzhAppSecret == '') {
            return callback(new Error("请填写gzhAppSecret"));
          }
        }
        return callback();
      };
      var _xcxAppId = (rule, value, callback) => {
        if (this.activeName == 'second') {
          if (this.wechat.xcxAppId == '') {
            return callback(new Error("请填写xcxAppId"));
          }
        }
        return callback();
      };
      var _xcxAppSecret = (rule, value, callback) => {
        if (this.activeName == 'second') {
          if (this.wechat.xcxAppSecret == '') {
            return callback(new Error("请填写xcxAppSecret"));
          }
        }
        return callback();
      };
      var _domain = (rule, value, callback) => {
        if (this.activeName == 'third') {
          if (this.wechat.domain == '') {
            return callback(new Error("请填写domain"));
          }
        }
        return callback();
      };
			return {
				activeName: 'first',
        wechat: {
          gzhAppId: '',
          gzhAppSecret: '',
          xcxAppId: '',
          xcxAppSecret: '',
          domain: '',
        },
        rules: {
          gzhAppId: [{
            validator:_gzhAppId,
            required: true,
            trigger: 'blur'
          }],
          gzhAppSecret: [{
            validator:_gzhAppSecret,
            required: true,
            trigger: 'blur'
          }],
          xcxAppId: [{
            validator:_xcxAppId,
            required: true,
            trigger: 'blur'
          }],
          xcxAppSecret: [{
            validator:_xcxAppSecret,
            required: true,
            message: '请填写AppSecret',
            trigger: 'blur'
          }],
          domain: [{
            validator:_domain,
            required: true,
            message: '请填写回调地址',
            trigger: 'blur'
          }]
        },
			}
		},
		methods: {
			handleClick(tab, event) {
			  this.$refs.wechat.clearValidate();
			},
			sub(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) { //通过验证规则
						savewec({
							"xcxAppId": this.wechat.xcxAppId,
							"xcxAppSecret": this.wechat.xcxAppSecret,
							"gzhAppId": this.wechat.gzhAppId,
							"gzhAppSecret": this.wechat.gzhAppSecret,
							"gzhDeviceToken": "",
							"domain": this.wechat.domain
						}).then(res => {
							if (res.respCode == '0000') {
								this.$alert('提交成功', {
									confirmButtonText: '确定',
									type: 'success'
								});
							}
						})
					} else { //没有通过验证规则
						this.$alert('提交失败,请将内容填写完整', {
							confirmButtonText: '确定',
							type: 'warning '
						});
						return false;
					}
				});
			},
      handDetail(){
        seewec({

        }).then(res => {
        	if (res.success) {
        	  console.log(res.data.config);
        	  this.wechat.domain = res.data.config.domain;
        	  this.wechat.gzhAppId = res.data.config.gzhAppId;
        	  this.wechat.gzhAppSecret = res.data.config.gzhAppSecret;
        	  this.wechat.xcxAppId = res.data.config.xcxAppId;
        	  this.wechat.xcxAppSecret = res.data.config.xcxAppSecret;
        	}
        })
      },
		},
		created() {

		},
		mounted() {
		  this.handDetail();
		}
	}
</script>

<style scoped="scoped">
	.filter-container{
		background:#fff;
		padding:20px 20px;
		position:relative;
	}
	.mgbt{
		margin-bottom:20px;
	}
	.cloudtit{
		font-size: 18px;
	}
	.inwd{
		width:100%;
	}
	.el-button--medium{
		width:180px;
		height:40px;
	}
</style>
